import React, {useState, useEffect} from 'react';
import action from '../../store/actions/supplierBefore';
import {connect} from 'react-redux';
import {Pagination, message} from 'antd';
import {deliverGoodsApi} from '../../api/index';
import Header from './Header';
import SupplierOrderList from './SupplierOrderList';
import DeliverGoods from './DeliverGoods';
import './SupplierBefore.scss';


function SupplierBefore(props) {
  const [count, setCount] = useState(1);
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    props.SUPPLIER_ORDER_LIST();
  }, []);

  // 分页改变
  const pageChange = page => {
    props.SUPPLIER_ORDER_LIST(page);
  };

  // 发货按钮点击事件
  // 发货按钮点击事件
  const deliverGoods = async (order_no, supplier_id, receipt_address_id) => {
    await props.GET_SUPPLIER_ORDER_DETAILS(order_no, supplier_id);
    await props.LOGISTICS_TEMPLATE(supplier_id);
    await props.GET_ADDRESS(receipt_address_id);
    // 获取发货地址
    await setVisible(true);
  };

  // 发货开始
  const showModal = () => setVisible(true);
  const handleOk = (data) => {
    setLoading(true);
    // 数据提交
    let supplier_id = props.supplierOrderDetials.supplier_id; // 供应商id
    let order_no = props.supplierOrderDetials.order_no;
    console.log(data, order_no, supplier_id);

    let tempData = {
      supplier_id,
      order_no,
      express_type: [],
      express_no: [],
      goods_title: [],
      num: []
    };
    const {logisticsTemplate} = props;
    data.forEach(item => {
      let express_typeArr = logisticsTemplate.map(option => {
        if (option.template_name === item.express_type) {
          return option.express_id;
        }
      });
      let express_type = null;
      express_typeArr.forEach((item, i) => {
        if (item !== undefined) {
          express_type = item;
        }
      });

      tempData.express_type.push(express_type);
      tempData.express_no.push(item.express_no);
      tempData.goods_title.push(item.goods_title);
      tempData.num.push(item.num);
    });

    if (tempData.express_type.includes(null)) {
      setLoading(false);
      message.error('快递名称 填写错误...');
      return false;
    }

    let actualQuantity = 0; // 实际发货数量
    tempData.num.forEach(item => {
      actualQuantity += +item;
    });
    let orderQuantity = 0; // 订单商品数量
    props.supplierOrderDetials.goods.forEach(item => {
      orderQuantity += item.number;
    });

    if (actualQuantity === orderQuantity) {
      tempData.goods_list_id = [];
      tempData.goods_title.forEach(item => {
        props.supplierOrderDetials.goods.forEach(value => {
          if (item == value.goods_title) {
            tempData.goods_list_id.push(value.goods_list_id);
          }
        });
      });
      deliverGoodsApi(tempData).then(res => {
        props.SUPPLIER_ORDER_LIST(props.current);
        setLoading(false);
        setVisible(false);
      }).catch(err => {
        console.log(err);
      });
    } else {
      setLoading(false);
      message.error('发货数量 填写错误...');
    }
  };
  const handleCancel = () => setVisible(false);
  // 发货结束

  return (
    <div>
      <Header/>
      <SupplierOrderList
        supplierOrderList={props.supplierOrderList}
        deliverGoods={deliverGoods}
      />
      <Pagination
        current={props.current}
        onChange={pageChange}
        total={props.pageCount ? props.pageCount : 1}
        style={{textAlign: 'center', marginTop: '20px'}}
        pageSize={10}
        hideOnSinglePage
      />
      <DeliverGoods
        loading={loading}
        visible={visible}
        handleOk={handleOk}
        handleCancel={handleCancel}
        supplierOrderDetials={props.supplierOrderDetials}
        logisticsTemplate={props.logisticsTemplate}
        address={props.address}
      />
    </div>
  );
}

const mapStateToProps = (state) => {
  return state.supplierBefore;
};
export default connect(mapStateToProps, action)(SupplierBefore);
